/* eslint-disable vue/no-reserved-component-names */
/* eslint-disable vue/multi-word-component-names */

import { defineAsyncComponent } from 'vue'
//core
// import 'primevue/resources/primevue.min.css'
import 'primeicons/primeicons.css'
//theme
import 'primevue/resources/themes/md-light-indigo/theme.css'
// import 'primevue/resources/themes/bootstrap4-light-blue/theme.css'
// import 'primevue/resources/themes/fluent-light/theme.css'

import PrimeVue from 'primevue/config'
import Toast from 'primevue/toast'
import Button from 'primevue/button'
import InputText from 'primevue/inputtext'
import Divider from 'primevue/divider'
import Dialog from 'primevue/dialog'
import TabView from 'primevue/tabview'
import TabPanel from 'primevue/tabpanel'
import Tag from 'primevue/tag'
import Menubar from 'primevue/menubar'
import Password from 'primevue/password'
import Card from 'primevue/card'
import Carousel from 'primevue/carousel'
import ToastService from 'primevue/toastservice'
import DynamicDialog from 'primevue/dynamicdialog'
import DialogService from 'primevue/dialogservice'
import SelectButton from 'primevue/selectbutton'
import Checkbox from 'primevue/checkbox'
import Panel from 'primevue/panel'
import TabMenu from 'primevue/tabmenu'
import DataView from 'primevue/dataview'
import Avatar from 'primevue/avatar'
import InputGroup from 'primevue/inputgroup'
import InputGroupAddon from 'primevue/inputgroupaddon'
import Chip from 'primevue/chip'
import OverlayPanel from 'primevue/overlaypanel'
import Listbox from 'primevue/listbox'
import HeadLine from './HeadLine.vue'

import Menu from 'primevue/menu'

import DataViewLayoutOptions from 'primevue/dataviewlayoutoptions' // optional

//import useXXXX
import { useDialog } from 'primevue/usedialog'
import { useToast } from 'primevue/usetoast'
import { Form, Field, ErrorMessage, useForm, useField } from 'vee-validate'

const components = [
  Listbox,
  Menu,
  OverlayPanel,
  Chip,
  Avatar,
  InputGroup,
  InputGroupAddon,
  SelectButton,
  TabMenu,
  Checkbox,
  Dialog,
  DataView,
  DataViewLayoutOptions,
  InputText,
  Password,
  Button,
  Toast,
  DynamicDialog,
  Form,
  Field,
  ErrorMessage,
  Divider,
  Menubar,
  Card,
  Carousel,
  TabView,
  TabPanel,
  Tag,
  Panel
]

export function mountUI(app) {
  app.use(PrimeVue)
  app.use(ToastService)
  app.use(DialogService)

  components.forEach((c) => app.component(c.name, c))
  app.component('HeadLine', HeadLine)
}

export { useDialog, useToast, useForm, useField }
export const DynamicForm = defineAsyncComponent(() => import('./DynamicForm.vue'))
